<template>
  <div class="form-main">
    <ul>
      <li class="input-box flex-box">
        <div><p>姓名</p><input v-model="formAdultMsg.self.name.value" type="text" placeholder="请输入您的姓名"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>性别</p>
          <div class="select-btn">
            <p @click="sexSelect">{{formAdultMsg.self.sex.value}}<span v-if="formAdultMsg.self.sex.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
      <li class="input-box flex-box">
        <div><p>是否已婚</p>
          <div class="select-btn">
            <p @click="checkSelect">{{formAdultMsg.self.ismarried.value}}<span v-if="formAdultMsg.self.ismarried.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
      <li class="input-box flex-box">
        <div><p>身份证号码</p><input type="text" @blur="checkSfzF" v-model="formAdultMsg.self.sfzNumber.value" placeholder="请输入身份证号码" oninput="value=value.replace(/[^\w]/g,'')"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>出生日期</p>
          <div class="select-btn">
            <p @click="showPicker3">{{formAdultMsg.self.birthday.value}}<span v-if="formAdultMsg.self.birthday.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
      <li class="input-box flex-box">
        <div><p>年龄</p>
          <div class="select-btn">
            <p>{{formAdultMsg.self.age.value}}<span v-if="formAdultMsg.self.age.value ==='请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
          </div>
        </div>
      </li>
      <li class="input-box flex-box">
        <div><p>民族</p><input v-model="formAdultMsg.self.nation.value" type="text" placeholder="请输入民族"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>籍贯</p><input v-model="formAdultMsg.self.place.value" type="text" placeholder="请输入籍贯"></div>
      </li>
    </ul>
    <ul class="select-last">
      <li class="input-box flex-box">
        <div><p>联系电话</p><input @blur="checkTel" v-model="formAdultMsg.contact.tel.value" type="text" placeholder="13049422520"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>通讯地址</p><input v-model="formAdultMsg.contact.address.value" type="text" placeholder="选填"></div>
      </li>
      <li class="input-box flex-box">
        <div><p>电子邮箱</p><input @blur="checkEmail" v-model="formAdultMsg.contact.email.value" type="text" placeholder="选填"></div>
      </li>
    </ul>
    <div class="form-foot">
      <div class="form-foot-main">
        <router-link to="/sjFormb"><button class="pre-page">上一步</button></router-link>
        <button class="next-page" @click="formcSubmitAdult">下一步</button>
      </div>
    </div>
    <awesome-picker
      ref="picker3"
      :textTitle="picker3.textTitle"
      :type="picker3.type"
      :anchor="picker3.anchor"
      @confirm="handlePicker5Confirm">
    </awesome-picker>
    <sexSelect v-if="sexShow" :showSex="sexShow" @tcClothe="tcClothe"></sexSelect>
    <checkSelect v-if="checkShow" :showSex="checkShow" @tcClotheS="tcClotheS"></checkSelect>
  </div>
</template>
<script>
// @ is an alias to /src
import sexSelect from '@/quanjiyin/components/SexSelect.vue'
import checkSelect from '@/quanjiyin/components/CheckSelect.vue'
const STORAGE_KEY_A = 'formcMsgAdult'
export default {
  name: 'formChild',
  data() {
    return {
      list: '',
      sexShow: false,
      checkShow: false,
      formAdultMsg: {
        self: {
          name: {
            key: '姓名',
            value: ''
          },
          sex: {
            key: '性别',
            value: '请选择'
          },
          ismarried: {
            key: '是否已婚',
            value: '请选择'
          },
          sfzNumber: {
            key: '身份证号码',
            value: ''
          },
          birthday: {
            key: '出生日期',
            value: '请选择'
          },
          age: {
            key: '年龄',
            value: '请选择'
          },
          nation: {
            key: '民族',
            value: ''
          },
          place: {
            key: '籍贯',
            value: ''
          }
        },
        contact: {
          tel: {
            key: '联系电话',
            value: ''
          },
          address: {
            key: '通讯地址',
            value: ''
          },
          email: {
            key: '电子邮箱',
            value: ''
          }
        }
      },
      picker3: {
        anchor: [],
        textTitle: '',
        type: 'date'
      },
      storageLists: this.$localStorage.fetch(STORAGE_KEY_A)
    }
  },
  components: {
    sexSelect,
    checkSelect
  },
  computed: {},
  watch: {
    storageLists: {
      handler: function(storageLists) {
        this.$localStorage.save(STORAGE_KEY_A, storageLists)
      },
      deep: true
    }
  },
  methods: {
    sexSelect() {
      setTimeout(() => {
        this.sexShow = true
      }, 0)
    },
    checkSelect() {
      setTimeout(() => {
        this.checkShow = true
      }, 0)
    },
    tcClothe(v) {
      console.log(v)
      if (v != undefined) {
        this.formAdultMsg.self.sex.value = v
      }
      if (this.sexShow === true) {
        this.sexShow = false
      }
    },
    tcClotheS(v) {
      if (v != undefined) {
        this.formAdultMsg.self.ismarried.value = v
      }
      if (this.checkShow === true) {
        this.checkShow = false
      }
    },
    checkSfzF() {
      let sfId = this.formAdultMsg.self.sfzNumber.value
      let yearNow = new Date().getFullYear()
      let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
      if (reg.test(this.formAdultMsg.self.sfzNumber.value) === false) {
        this.$layer.open({
          content: '请输入正确的身份证号码',
          skin: 'msg',
          time: 2
        })
        return false
      } else {
        if (sfId.length === 15) {
          let year = Number('19' + sfId.substr(6, 2))
          let month = sfId.substr(8, 2)
          month = Number(month) < 10 ? Number(month.substr(1, 1)) : Number(month)
          let day = sfId.substr(10, 2)
          day = Number(day) < 10 ? Number(day.substr(1, 1)) : Number(day)
          this.formAdultMsg.self.birthday.value = year + '年' + month + '月' + day + '日'
          this.formAdultMsg.self.age.value = yearNow - year + '岁'
        } else if (sfId.length === 18) {
          let year = Number(sfId.substr(6, 4))
          let month = sfId.substr(10, 2)
          month = Number(month) < 10 ? Number(month.substr(1, 1)) : Number(month)
          let day = sfId.substr(12, 2)
          day = Number(day) < 10 ? Number(day.substr(1, 1)) : Number(day)
          // console.log(yearNow);
          // console.log(year,month,day,yearNow);
          // birthday = year + "年" + month + "月" + day + "日";
          // age = yearNow - year + "岁";
          this.formAdultMsg.self.birthday.value = year + '年' + month + '月' + day + '日'
          this.formAdultMsg.self.age.value = yearNow - year + '岁'
        }
      }
    },
    checkTel() {
      let reg = /^1\d{10}$/
      if (reg.test(this.formAdultMsg.contact.tel.value) === false) {
        this.$layer.open({
          content: '请输入正确的手机号码',
          skin: 'msg',
          time: 2
        })
        return false
      }
    },
    checkEmail() {
      let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (reg.test(this.formAdultMsg.contact.email.value) === false) {
        this.$layer.open({
          content: '请输入正确的邮箱地址',
          skin: 'msg',
          time: 2
        })
        return false
      }
    },
    showPicker3() {
      this.$refs.picker3.show()
    },
    handlePicker5Confirm(v) {
      let yearNow = new Date().getFullYear()
      let Y = v[0].value.slice(-5, -1)
      if (yearNow - Y < 18) {
        this.$layer.open({
          content: '成人年龄不能小于十八岁',
          skin: 'msg',
          time: 2
        })
        return false
      } else {
        this.formAdultMsg.self.birthday.value = v[0].value + '' + v[1].value + '' + v[2].value
        this.formAdultMsg.self.age.value = yearNow - v[0].value.slice(0, 4) + '岁'
      }
    },
    formcSubmitAdult() {
      if (this.formAdultMsg.self.name.value === '') {
        this.$layer.open({
          content: '请输入您的姓名',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formAdultMsg.self.sex.value === '请选择') {
        this.$layer.open({
          content: '请输入您的性别',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formAdultMsg.self.sfzNumber.value === '') {
        this.$layer.open({
          content: '请输入父亲身份证号码',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formAdultMsg.self.birthday.value === '请选择') {
        this.$layer.open({
          content: '请输入您的出生日期',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formAdultMsg.self.nation.value === '') {
        this.$layer.open({
          content: '请输入您的民族',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formAdultMsg.self.place.value === '') {
        this.$layer.open({
          content: '请输入您的籍贯',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formAdultMsg.contact.tel.value === '') {
        this.$layer.open({
          content: '请输入您的联系电话',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formAdultMsg.contact.address.value === '') {
        this.$layer.open({
          content: '请输入您的通讯地址',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formAdultMsg.contact.email.value === '') {
        this.$layer.open({
          content: '请输入您的电子邮箱',
          skin: 'msg',
          time: 2
        })
        return false
      } else {
        window.localStorage.removeItem('formcMsgAdult')
        setTimeout(() => {
          this.storageLists = this.formAdultMsg
        }, 0)
        setTimeout(() => {
          // console.log(window.localStorage);
          console.log(this.$localStorage.fetch(STORAGE_KEY_A))
          this.$router.push('/SjFormd')
        }, 100)
      }
    }
  },
  mounted() {
    this.formAdultMsg.contact.tel.value = this.$store.state.logPhoneNum
    this.formAdultMsg = window.localStorage.formcMsgAdult
      ? JSON.parse(window.localStorage.formcMsgAdult)
      : this.formAdultMsg
  }
}
</script>
<style lang="scss" scoped>
</style>
